<template>
  <!-- 添加或修改履约保函对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" destroy-on-close width="1360px" append-to-body>
    <el-form ref="form" :inline="true" :model="form" label-width="180px" disabled>
    <!-- 企业信息 -->
    <el-divider content-position="left">企业信息</el-divider>
      <div>
        <el-form-item label="企业名称" prop="qyName">
          <div class="label_txt">{{ form.qyName }}</div>
        </el-form-item>
        <el-form-item label="企业所在省市" prop="qyShengAndShi">
          <div class="label_txt">{{ form.qySheng + '/' + form.qyShi }}</div>
        </el-form-item>
        <el-form-item label="注册资金" prop="qyZcMoney">
          <div class="label_txt">{{ form.qyZcMoney }}</div>
        </el-form-item>
        <el-form-item label="企业成立时间" prop="qyClDate">
          <div class="label_txt">{{ form.qyClDate }}</div>
        </el-form-item>
        <el-form-item label="企业类型" prop="qyType">
          <div class="label_txt">{{ form.qyType }}</div>
        </el-form-item>
        <el-form-item label="企业最高资质" prop="qyZizhi">
          <div class="label_txt">{{ form.qyZizhi }}</div>
        </el-form-item>
        <el-form-item label="特殊情况" prop="qySpecial">
          <div class="label_txt">{{ form.qySpecial }}</div>
        </el-form-item>
        <el-form-item label="发票类型" prop="qySpecial">
          <div class="label_txt">{{ form.qySpecial }}</div>
        </el-form-item>
        <el-collapse class="s_collapse" v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <el-divider content-position="left">发票信息(可折叠)</el-divider>
            </template>
            <el-form-item label="发票名称" prop="qyKpName">
              <div class="label_txt">{{ form.qyKpName }}</div>
            </el-form-item>
            <el-form-item label="发票税号" prop="qyKpNum">
              <div class="label_txt">{{ form.qyKpNum }}</div>
            </el-form-item>
            <el-form-item label="发票电话" prop="qyKpPhone">
              <div class="label_txt">{{ form.qyKpPhone }}</div>
            </el-form-item>
            <el-form-item label="发票地址" prop="qyKpAddress">
              <div class="label_txt">{{ form.qyKpAddress }}</div>
            </el-form-item>
            <el-form-item label="发票开户行" prop="qyKpBank">
              <div class="label_txt">{{ form.qyKpBank }}</div>
            </el-form-item>
            <el-form-item label="发票开户账号" prop="qyKpBankNum">
              <div class="label_txt">{{ form.qyKpBankNum }}</div>
            </el-form-item>
            <el-form-item label="保函邮寄地址" prop="qyBhSendAdress">
              <div class="label_txt">{{ form.qyBhSendAdress }}</div>
            </el-form-item>
            <el-form-item label="发票邮寄地址" prop="qyKpSendAdress">
              <div class="label_txt">{{ form.qyKpSendAdress }}</div>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 项目信息 -->
      <el-divider content-position="left">项目信息</el-divider>
      <div>
        <el-form-item label="是否补录" prop="isBulu">
          <div class="label_txt">{{ form.isBulu }}</div>
        </el-form-item>
        <el-form-item label="出函类型" prop="xmChType">
          <div class="label_txt">{{ form.xmChType }}</div>
        </el-form-item>
        <el-form-item label="出函机构及对接人" prop="xmChDjuser">
          <div class="label_txt">{{ selectbLetter.institution }} ({{
            selectbLetter.name }})</div>
        </el-form-item>
        <el-form-item label="保函类型" prop="xmBhType">
          <div class="label_txt">{{ form.xmBhType }}</div>
        </el-form-item>
        <el-form-item label="受益人名称" prop="xmSyName">
          <div class="label_txt">{{ form.xmSyName }}</div>
        </el-form-item>
        <el-form-item label="受益人类型" prop="xmSyType">
          <div class="label_txt">{{ form.xmSyType }}</div>
        </el-form-item>
      </div>

      <div>
        <el-form-item label="项目名称" prop="xmName">
          <div class="label_txt">{{ form.xmName }}</div>
        </el-form-item>
        <el-form-item label="项目所在省市" prop="xmShengAndShi">
          <div class="label_txt">{{ form.xmSheng + '/' + form.xmShi }}</div>
        </el-form-item>
        <el-form-item label="项目所在地" prop="xmAddress">
          <div class="label_txt">{{ form.xmAddress }}</div>
        </el-form-item>
      </div>

      <!--      <div class="bd_box">-->
      <!--        <el-form-item v-for="(item, index) in form.xmNameLotList" :key="index" label="标段"-->
      <!--          :prop="'xmNameLotList.' + index">-->
      <!--          <div class="label_txt">{{ form.xmNameLotList[index] }}</div>-->
      <!--        </el-form-item>-->
      <!--      </div>-->

      <div>
        <el-form-item label="是否特殊项目" prop="xmSpecial">
          <div class="label_txt">{{ form.xmSpecial }}</div>
        </el-form-item>

        <el-form-item v-if="form.xmSpecial === '其他'" label="特殊项目名称" prop="xmSpecialName">
          <div class="label_txt">{{ form.xmSpecialName }}</div>
        </el-form-item>

        <el-form-item label="中标时间或合同签署时间" prop="xmDate">
          <div class="label_txt">{{ form.xmDate }}</div>
        </el-form-item>
        <el-form-item label="中标金额" prop="xmMoney">
          <div class="label_txt">{{ form.xmMoney }}</div>
        </el-form-item>
        <el-form-item v-if="form.xmBhblshow" label="保函比例" prop="xmBhProportion">
          <div class="label_txt">{{ form.xmBhProportion }}</div>
        </el-form-item>
        <el-form-item label="工期" prop="xmGongqi">
          <div class="label_txt">{{ form.xmGongqi }}</div>
        </el-form-item>
      </div>

      <div>
        <el-form-item label="招文" prop="xmArticleUrl">
          <file-upload v-model="form.xmArticleUrl" />
        </el-form-item>
        <el-form-item label="中标通知" prop="xmZbUrl">
          <file-upload v-model="form.xmZbUrl" />
        </el-form-item>
        <el-form-item label="合同文件" prop="xmContractUrl">
          <file-upload v-model="form.xmContractUrl" />
        </el-form-item>
        <el-form-item label="其他文件" prop="xmQitaUrl">
          <file-upload v-model="form.xmQitaUrl" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="受益人名称依据" prop="xmSyUrl">
          <image-upload v-model="form.xmSyUrl" />
        </el-form-item>
        <el-form-item label="项目名称依据" prop="xmXmmcyjUrl">
          <image-upload v-model="form.xmXmmcyjUrl" />
        </el-form-item>
        <el-form-item label="保函依据" prop="xmBhyjUrl">
          <image-upload v-model="form.xmBhyjUrl" />
        </el-form-item>
        <el-form-item label="工期依据" prop="xmGqyjUrl">
          <image-upload v-model="form.xmGqyjUrl" />
        </el-form-item>
      </div>

      <!-- 出函机构 -->
      <el-divider content-position="left">出函机构和保函信息</el-divider>
      <el-form-item label="机构对接人">
        <div class="label_txt">{{ form.duijieren }}</div>
      </el-form-item>
      <el-form-item label="出函机构">
        <div class="label_txt">{{ form.letterInstitution }}</div>
      </el-form-item>
      <el-form-item label="联系人电话">
        <div class="label_txt">{{ selectbLetter.phone }}</div>
      </el-form-item>
      <el-form-item label="收件人">
        <div class="label_txt">{{ selectbLetter.recipient }}</div>
      </el-form-item>
      <el-form-item label="收件人电话">
        <div class="label_txt">{{ selectbLetter.recipientPhone }}</div>
      </el-form-item>
      <el-form-item label="收件人地址">
        <div class="label_txt">{{ selectbLetter.address }}</div>
      </el-form-item>
      <el-form-item label="收款账号1">
        <div class="label_txt">{{ selectbLetter.bankAccount }}</div>
      </el-form-item>
      <el-form-item label="收款账号2">
        <div class="label_txt">{{ selectbLetter.bankAccount2 }}</div>
      </el-form-item>

      <!-- 保函信息 -->
      <div>
        <el-form-item label="出函类型" prop="xmChType">
          <div class="label_txt">{{ form.xmChType }}</div>
        </el-form-item>
        <el-form-item label="特殊要求" prop="bhRemark">
          <div class="label_txt">{{ form.bhRemark }}</div>
        </el-form-item>
        <el-form-item label="保函格式" prop="bhGeshi">
          <div class="label_txt">{{ form.bhGeshi }}</div>
        </el-form-item>
        <el-form-item label="格式上传" prop="bhGeshiUrl">
          <file-upload v-model="form.bhGeshiUrl" />
        </el-form-item>
      </div>

      <!-- 费用信息 -->
      <el-divider content-position="left">费用信息</el-divider>
      <div>
        <el-form-item label="收费" prop="fkMoney">
          <div class="label_txt">{{ form.fkMoney }}</div>
        </el-form-item>
        <el-form-item label="收费比例" prop="fkSfbili">
          <div class="label_txt">{{ form.fkSfbili }}</div>
        </el-form-item>
        <el-form-item label="保函成本" prop="fkBhcb">
          <div class="label_txt">{{ form.fkBhcb }}</div>
        </el-form-item>
        <el-form-item label="有无合作方费用" prop="isBulu">
          <div class="label_txt">{{ form.isBulu }}</div>
        </el-form-item>
        <el-form-item v-if="form.fkHzShow" label="合作方费用" prop="fkHzMoney">
          <div class="label_txt">{{ form.fkHzMoney }}</div>
        </el-form-item>
        <el-form-item v-if="form.fkHzShow" label="合作方付款方式" prop="fkHzUrl">
          <div class="label_txt">{{ form.fkHzUrl }}</div>
        </el-form-item>
        <el-form-item label="公司收益" prop="fkShouyi">
          <div class="label_txt">{{ form.fkShouyi }}</div>
        </el-form-item>
        <el-form-item label="返润扣税" prop="fkFanrun">
          <div class="label_txt">{{ form.fkFanrun }}</div>
        </el-form-item>
        <el-form-item label="业绩" prop="ywYeji">
          <div class="label_txt">{{ form.ywYeji }}</div>
        </el-form-item>
        <el-form-item label="付款方式" prop="fkType">
          <div class="label_txt">{{ form.fkType }}</div>
        </el-form-item>
        <el-form-item label="付款凭证" prop="fkUrl">
          <file-upload v-model="form.fkUrl" />
        </el-form-item>
      </div>

      <!-- 运营 -->
      <el-divider content-position="left">运营</el-divider>

      <el-form-item label="受理意见" prop="yyAcceptanceOpinion">
        <div class="label_txt">{{ form.yyAcceptanceOpinion }}</div>
      </el-form-item>
      <el-form-item label="价格" prop="yyPrice">
        <div class="label_txt">{{ form.yyPrice }}</div>
      </el-form-item>
      <el-form-item label="特殊备注" prop="yySpecialRemark">
        <div class="label_txt">{{ form.yySpecialRemark }}</div>
      </el-form-item>
      <el-form-item label="资料包是否合格" prop="yyContractHg">
        <div class="label_txt">{{ form.yyContractHg }}</div>
      </el-form-item>
      <el-form-item label="补充文件描述" prop="yySupplyRemark">
        <div class="label_txt">{{ form.yySupplyRemark }}</div>
      </el-form-item>
      <el-form-item label="反担保签署" prop="yyFandanbaoqianshu">
        <div class="label_txt">{{ form.yyFandanbaoqianshu }}</div>
      </el-form-item>
      <el-form-item label="邮寄单号" prop="yyYoujidanhao">
        <div class="label_txt">{{ form.yyYoujidanhao }}</div>
      </el-form-item>
      <el-form-item label="总费用" prop="ywTotalMoney">
        <div class="label_txt">{{ form.ywTotalMoney }}</div>
      </el-form-item>
      <el-form-item label="银行成本" prop="bankMoney">
        <div class="label_txt">{{ form.bankMoney }}</div>
      </el-form-item>
      <!--      <el-form-item label="银行收款账户" prop="bankAccount">-->
      <!--        <div class="label_txt">{{ form.bankAccount }}</div>-->
      <!--      </el-form-item>-->
      <el-form-item label="是否收到" prop="bankSf">
        <div class="label_txt">{{ form.bankSf }}</div>
      </el-form-item>
      <el-form-item label="银行成本2" prop="bankMoney2">
        <div class="label_txt">{{ form.bankMoney2 }}</div>
      </el-form-item>
      <!--      <el-form-item label="银行账户2" prop="bankAccount2">-->
      <!--        <div class="label_txt">{{ form.bankAccount2 }}</div>-->
      <!--      </el-form-item>-->
      <el-form-item label="是否收到2" prop="bankSf2">
        <div class="label_txt">{{ form.bankSf2 }}</div>
      </el-form-item>
      <el-form-item label="返润" prop="ywFanMoney">
        <div class="label_txt">{{ form.ywFanMoney }}</div>
      </el-form-item>
      <el-form-item label="扣税" prop="ywTaxMoney">
        <div class="label_txt">{{ form.ywTaxMoney }}</div>
      </el-form-item>
      <el-form-item label="是否开票" prop="sfKp">
        <div class="label_txt">{{ form.sfKp }}</div>
      </el-form-item>
      <el-form-item label="出函日期" prop="bhDate">
        <div class="label_txt">{{ form.bhDate }}</div>
      </el-form-item>
      <el-form-item label="邮寄单号" prop="mailNum">
        <div class="label_txt">{{ form.mailNum }}</div>
      </el-form-item>
      <div>
        <el-form-item label="上传保函" prop="yySupplyUrl">
          <file-upload v-model="form.yySupplyUrl" />
        </el-form-item>
        <el-form-item label="补充资料" prop="yyBaohanUrl">
          <file-upload v-model="form.yyBaohanUrl" />
        </el-form-item>
        <el-form-item label="签约资料包" prop="yyContractData">
          <file-upload v-model="form.yyContractData" />
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { pcTextArr } from "element-china-area-data";
import { getBLetterList } from "@/api/guarantee/letter";
export default {
  name: "AgreementDetail",
  props: {
    title: {
      type: String,
      default: '详情'
    },
    detailOpen: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      required: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.detailOpen;
      },
      set(val) {
        this.$emit('changeDialog', val)
      }
    }
  },
  data() {
    return {
      // 省市数据
      areaData: pcTextArr,
      bLetters: [],
      // 选择的出函机构
      selectbLetter: {},
      // 发票信息折叠
      activeNames: []
    };
  },
  watch: {
    form: {
      handler: function (newVal, oldVal) {
        this.getBLetters(newVal.duijieren);
      },
      deep: true
    }
  },
  methods: {
    /** 出函机构 */
    changInstitution(val) {
      let selectbLetterArr = this.bLetters.filter(item => item.id === val)
      if (selectbLetterArr && selectbLetterArr.length > 0) {
        this.selectbLetter = selectbLetterArr[0]
      }
    },
    getBLetters(name) {
      getBLetterList({name}).then(response => {
        this.bLetters = response.data;
        this.changInstitution(this.form.xmChDjuser)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my_select {
  width: 204px;
}

.my_picker {
  width: 204px;
}

.lotInput {
  width: 150px;
  margin-right: 10px;
}

.bd_box {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-upload--picture-card,
::v-deep .upload-file-uploader,
::v-deep .ele-upload-list__item-content-action {
  display: none
}

.label_txt {
  width: 204px
}

.s_collapse{
  border: none;
  ::v-deep .el-collapse-item__header{
    border: none;
  }
  ::v-deep .el-collapse-item__wrap{
    border: none;
  }
  ::v-deep .el-collapse-item__content{
    padding-bottom: 0;
  }
  ::v-deep .el-icon-arrow-right::before{
    display: none;
  }
}
</style>
